import app from './app'
import {jump, offsetLeft, offsetTop, trans} from "@/utils"
import {Modal, message, notification} from 'ant-design-vue'
import ajax from '@/utils/ajax'
import Clipboard from 'clipboard'
import {createMarkdownRenderer} from '@/markdown/markdown'

import {highlight} from '@/markdown/plugins/highlight'
import {
    h
} from 'vue'
import render from './components/render/render.vue'
import queueProgress from './components/queueProgress.vue'
import {action} from "@/store";
//跳转
app.directive('redirect', {
    created(el, binding) {
        el.onclick = function () {
            jump(binding.value)
        }
    }
})
//拷贝复制
app.directive('copy', {
    created(el, binding) {
        binding.clipboard = new Clipboard(el,{
            text: function() {
                return binding.value;
            }
        })
        binding.clipboard.on('success', e => {
            message.success(trans('Copy.success'))
        })
        binding.clipboard.on('error', e => {
            message.error(trans('Copy.error'))
        })
    },
    beforeUnmount(el,binding){
        if(binding.clipboard){
            binding.clipboard.destroy()
        }
    }
})
//ajax请求
app.directive('ajax', {
    created(el, binding) {
        let callback = el.onclick
        let updateObject = binding.arg.updateObject
        let instance = binding.instance
        if(binding.instance.modelValue){
            instance = binding.instance
        }else if(binding.instance.$parent.modelValue){
            instance = binding.instance.$parent
        }
        el.onclick = function (e) {
            e.stopPropagation()
            if(callback){
                callback(e)
            }
            let selected = []
            if(binding.arg.gridBatch){
                selected = instance.grid.exposed.selectIds.value
            }
            if(binding.arg.confirm){
                if(binding.arg.gridBatch && selected.length == 0){
                    return message.warn(trans('Grid.selectedAction'))
                }
                if(binding.arg.confirm.content && binding.arg.confirm.content.name){
                    binding.arg.confirm.content = h(render,{data:binding.arg.confirm.content})
                }
                Modal.confirm(Object.assign({
                    onOk() {
                        return new Promise((resolve, reject) => {
                            ajax(binding.value,binding.arg.gridBatch,selected,instance,updateObject).then((res)=>{
                                if(binding.arg.confirm.gridRefresh){
                                    instance.grid.exposed.refresh()
                                }
                                if(binding.arg.confirm.modalRefresh){
                                    let params = {}
                                    if(typeof (binding.arg.confirm.modalRefresh) === 'object'){
                                        params = binding.arg.confirm.modalRefresh
                                    }
                                    action.modalRefresh(params)
                                }
                                instance.$emit('success')
                                resolve()
                            }).catch(()=>{
                                reject()
                            })
                        })
                    },
                },binding.arg.confirm))
            }else{

                ajax(binding.value,binding.arg.gridBatch,selected,instance,updateObject).then((res)=>{
                    if(binding.arg.gridRefresh){
                        instance.grid.exposed.refresh()
                    }
                    if(binding.arg.modalRefresh){
                        let params = {}
                        if(typeof (binding.arg.modalRefresh) === 'object'){
                            params = binding.arg.modalRefresh
                        }
                        action.modalRefresh(params)
                    }
                })
            }
        }
    }
})

app.directive('queueProgress',{
    created(el,binding){
        let callback = el.onclick
        el.onclick = function (e) {
            e.stopPropagation()
            if(callback){
                callback(e)
            }
            notification.open({
                appContext:app._context,
                message:binding.value,
                duration:null,
                description:h(queueProgress,{
                    class:binding.arg.class,
                    refresh:binding.arg.refresh,
                    grid:binding.instance.grid ? binding.instance.grid.exposed : null
                })
            })
        }
    }
})
app.directive('prism',{
    created(el,binding){
        let code = highlight(binding.value,binding.arg.lang)
        let copyEl = document.createElement('div')
        copyEl.className = 'copy'
        copyEl.title = '复制'
        copyEl.innerHTML = '<i class="far fa-copy" style="color:#cccc;font-size:16px"></i>'
        binding.clipboard = new Clipboard(copyEl,{
            text: function() {
                return binding.value;
            }
        })
        binding.clipboard.on('success', e => {
            message.success(trans('Copy.success'))
        })
        binding.clipboard.on('error', e => {
            message.error(trans('Copy.error'))
        })
        el.innerHTML = code
        el.appendChild(copyEl)
    },
    beforeUnmount(el,binding){
        if(binding.clipboard){
            binding.clipboard.destroy()
        }
    }
})
app.directive('markdown',{
    created(el,binding){
        const md = createMarkdownRenderer('/', binding.arg || {}, '/')
        el.innerHTML = md.render(binding.value)
    }
})
app.directive('focus',{
    created(el,binding){
        setTimeout(()=>{
            el.querySelector('input').focus()
        })
    }
})
app.directive('select',{
    created(el,binding){
        setTimeout(()=>{
            el.querySelector('input').select()
        })
    }
})
app.directive('rowSign',{
    created(el,binding){
        let span = document.createElement('span')
        span.innerText = 'row'
        span.className = 'curd-sign-position'
        el.append(span)
    }
})
app.directive('RowColSign',{
    created(el,binding){
        let span = document.createElement('span')
        span.innerText = binding.value
        span.className = binding.arg
        el.append(span)
    }
})
app.directive('drag',{
    created(el,binding){
        el.onmousedown = function (e) {
            var disx = e.pageX - el.offsetLeft;
            var disy = e.pageY - el.offsetTop;
            // 给当前元素添加属性，用于元素状态的判断
            el.style.position = "absolute"
            el.setAttribute('ele-flag', false)
            el.setAttribute('draging-flag', true)
            let firstTime = new Date().getTime();
            document.onmousemove = function (e) {
                let left = e.clientX - disx;
                let top = e.clientY - disy;
                // 限制拖拽范围不超出可视区
                if ( left <= 0) {
                    left = 5    // 设置成5,离边缘不要太近
                } else if (left > document.documentElement.clientWidth - el.clientWidth) { // document.documentElement.clientWidth屏幕可视区宽度
                    left = document.documentElement.clientWidth - el.clientWidth - 5
                }

                if ( top <= 0) {
                    top = 5
                } else if (top > document.documentElement.clientHeight - el.clientHeight) {
                    top = document.documentElement.clientHeight - el.clientHeight - 5
                }
                el.style.left = left + 'px'
                el.style.top= top + 'px'
            }
            document.onmouseup = function (event) {
                document.onmousemove = document.onmouseup = null;
                let lastTime = new Date().getTime();
                if ((lastTime - firstTime) > 200) {
                    el.setAttribute('ele-flag', true)
                    event.stopPropagation()
                }
                setTimeout(function () {
                    el.setAttribute('draging-flag', false)
                }, 100)
            }
        }
    }
})